<template>
  <v-container id="user-table">
    <v-data-table
      :headers="headers"
      :items="users"
      :loading="loading"
      class="elevation-4 px-5"
      sort-by="calories"
    >
      <template v-slot:top>
        <v-card flat>
          <v-card-title>用户表单</v-card-title>
          <v-card-text>
            <v-btn
              v-yss-permission="`RBAC:User:Create`"
              color="primary"
              dark
              outlined
              @click="newItem"
            >
              新建 </v-btn
            ><v-btn
              v-yss-permission="`RBAC:User:Create`"
              class="ml-2"
              color="success"
              dark
              outlined
              @click="newItem"
            >
              编辑
            </v-btn>
            <v-btn
              v-yss-permission="`RBAC:User:Create`"
              class="ml-2"
              color="error"
              dark
              outlined
              @click="newItem"
            >
              删除
            </v-btn>
          </v-card-text>
        </v-card>
      </template>
      <template v-slot:item.isDelete="{ item }">
        <v-checkbox
          v-model="item.isDelete"
          class="pa-0 ma-0 is-delete"
          dense
          disabled
        >
        </v-checkbox>
      </template>
      <template v-slot:item.password="{ item }">
        <div>{{ item.password.substring(0, 6) + "..." }}</div>
      </template>

      <template v-slot:item.action="{ item }">
        <v-icon class="mr-2" small @click="editItem(item)">
          mdi-pencil
        </v-icon>
      </template>
      <template v-slot:no-data>
        <div class="my-4">{{ error.error + " " + error.message }}</div>
        <v-btn class="mb-4" color="primary" @click="loadData">
          重新加载
        </v-btn>
      </template>
    </v-data-table>

    <v-dialog v-model="dialog" max-width="800px">
      <v-card>
        <v-card-title>
          <span class="headline">
            {{ editedItem.id !== "" ? editedItem.id : "新建" }}
          </span>
        </v-card-title>
        <v-card-text>
          <v-container>
            <v-row>
              <v-col cols="12" md="4" sm="6">
                <v-text-field
                  v-model="editedItem.username"
                  label="用户名"
                ></v-text-field>
              </v-col>
              <v-col cols="12" md="4" sm="6">
                <v-text-field
                  v-model="editedItem.password"
                  label="密码"
                ></v-text-field>
              </v-col>
            </v-row>
          </v-container>
        </v-card-text>

        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="blue darken-1" text @click="dialog = false">
            取消
          </v-btn>
          <v-btn color="blue darken-1" text @click="save">
            保存
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-container>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import api from "@/api";
import { IErrorData, IResponseData } from "@/model/frame/ResponseModel";
import { DataTableHeader } from "vuetify";
import { User } from "@/model/RBAC/User";
import CryptTool from "@/utils/frame/CryptTool";

@Component({})
export default class UserManage extends Vue {
  // region Prop
  // endregion
  // region Data
  headers: DataTableHeader[] = [
    { text: "编号", value: "id" },
    { text: "用户名", value: "username" },
    { text: "密码", value: "password" },
    { text: "创建时间", value: "createTime" },
    { text: "是否删除", value: "isDelete" },
    { text: "操作", value: "action", sortable: false }
  ];
  users: User[] = [];
  editedItem: User = new User();
  oldPassword = "";
  dialog = false;
  loading = true;
  error: IErrorData = {
    error: "",
    message: ""
  };
  // endregion
  // region computed
  // endregion
  // region watch
  // endregion
  // region method
  editItem(item: User) {
    this.editedItem = { ...item };
    this.oldPassword = this.editedItem.password;
    this.dialog = true;
  }

  newItem() {
    this.oldPassword = "";
    this.editedItem = new User();
    this.dialog = true;
  }

  async save() {
    if (this.oldPassword != this.editedItem.password) {
      this.editedItem.password = CryptTool.md5(this.editedItem.password);
    }

    if (this.editedItem.id == "") {
      await api.user.create(this.editedItem.username, this.editedItem.password);
    } else {
      await api.user.update(this.editedItem);
    }
    this.dialog = false;
    this.loadData();
  }

  dateTimeFormat(date: string): string {
    const _date = new Date(date);
    return `${_date.getTime()}`;
  }

  loadData() {
    this.loading = true;

    setTimeout(() => {
      api.user
        .list()
        .then((rsp: IResponseData) => {
          this.loading = false;
          this.users = rsp.data.users;
        })
        .catch((e: IResponseData<IErrorData>) => {
          this.error = e.data;
          this.loading = false;
          console.log(this.error);
        });
    }, 1000);
  }
  // endregion
  // region hook
  created() {
    this.loadData();
  }
  // endregion
}
</script>

<style lang="scss">
#user-table .is-delete {
  height: 22px;
}
</style>
